<template>
	<view class="history">
		<!-- <uni-notice-bar text="注意:选择周时,应该选择某一周的周一至周日的时间哦~"></uni-notice-bar> -->
		<view class="select">
			<view class="select_date" v-if="selectType!==4">
				<view class="select_date_item" :class="timeType===index+1?'active':'noActive'"
					@click="selectDate(index+1)" v-for="(item,index) in ['日','月','年']" :key="index">{{item}}</view>
			</view>
			<!-- 日期选择 -->
			<view class="date_mouth">
				<view class="date_mouth_left">选择时间:</view>
				<view class="date_mouth_center" @click="open">
					<text>{{dateValue}}</text>
					<text class="iconfont icon-rili"></text>
				</view>
			</view>
		</view>
		<!-- 图表区域 -->
		<view class="charts">
			<uni-card margin="0">
				<view class="select_type">
					<view @click="SelectType(1)" :class="selectType===1?'active':'noActive'">交流分析</view>
					<view @click="SelectType(2)" :class="selectType===2?'active':'noActive'">直流电流对比</view>
					<view @click="SelectType(3)" :class="selectType===3?'active':'noActive'">直流电压对比</view>
					<view @click="SelectType(4)" :class="selectType===4?'active':'noActive'">实时功率</view>
				</view>
				<view class="power_list" v-if="selectType===4 && powerList.length">
					<view class="title">
						<view>时间</view>
						<view>总功率(W)</view>
						<view>发电量</view>
					</view>
					<view class="list" v-for="item in powerList" :key="item.id">
						<view>{{item.createTime}}</view>
						<view>{{item.gridPower}}</view>
						<view>{{item.todayEnergy}}</view>
					</view>
				</view>
				<view v-else-if="chartData.categories.length && (timeType===2||timeType===3)"
					style="height: 500rpx;width: 100%;">
					<qiun-data-charts type="column" :opts="columnOpts" :chartData="chartData" :ontouch='true' />
				</view>
				<view v-else-if="chartData.categories.length && timeType===1" style="height: 500rpx;width: 100%;">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch='true' />
				</view>
				<o-empty v-else />
			</uni-card>
		</view>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="false" :lunar="false"
			:range="true" @confirm="confirm" />
	</view>
</template>

<script>
	import {
		getDeviceQueryHistory,
		getDeviceQuerydcHistory,
		getDeviceQuerydcPowerList
	} from "@/common/api/api.js"
	import indexVue from "../../tabbar/monitor/index.vue"

	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		props: {
			did: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				year: getDate().year,
				startMonth: getDate().month,
				endMonth: getDate().month,
				startDay: getDate().date,
				endDay: getDate().date,
				timeType: 1,
				selectType: 1,
				chartData: {
					categories: [],
					series: []
				},
				pv1: {
					voltage: [],
					current: [],
					power: []
				},
				pv2: {
					voltage: [],
					current: [],
					power: []
				},
				pv3: {
					voltage: [],
					current: [],
					power: []
				},
				pv4: {
					voltage: [],
					current: [],
					power: []
				},
				exchange: {
					currentRUA: [],
					currentSVB: [],
					currentTWC: [],
					voltageRUA: [],
					voltageSVB: [],
					voltageTWC: [],
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					// enableScroll: true,
					dataLabel: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 10,
						// itemCount: 10,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							position: 'left'
						}, {
							position: 'right'
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.5,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				//柱状图
				columnOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 12,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 10
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					},
				},
				powerList: [], //功率列表参数
			}
		},
		computed: {
			dateValue() {
				switch (this.timeType) {
					case 1:
						return this.year + '/' + this.startMonth + '/' + this.startDay
						break;
					case 4:
						return this.year + '/' + this.startMonth + '/' + this.startDay + '-' + this.year + '/' + this
							.endMonth + '/' + this.endDay
						break;
					case 2:
						return this.year + '/' + this.startMonth
						break;
					case 3:
						return this.year
						break;
					default:
						break;
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getExchangeData()
			})
		},
		methods: {
			reset() {
				this.chartData = {
						categories: [],
						series: []
					},
					this.pv1 = {
						voltage: [],
						current: [],
						power: []
					},
					this.pv2 = {
						voltage: [],
						current: [],
						power: []
					},
					this.pv3 = {
						voltage: [],
						current: [],
						power: []
					},
					this.pv4 = {
						voltage: [],
						current: [],
						power: []
					},
					this.exchange = {
						currentRUA: [],
						currentSVB: [],
						currentTWC: [],
						voltageRUA: [],
						voltageSVB: [],
						voltageTWC: [],
					}
			},
			open() {
				this.$refs.calendar.open()
			},

			isSelectType(index) {
				switch (index) {
					case 1:
						this.opts.yAxis = {
								showTitle: true,
								gridType: "dash",
								dashLength: 2,
								data: [{
									position: 'left',
									title: '电压(V)'
								}, {
									position: 'right',
									title: "电流(A)"
								}]
							},
							this.chartData.series = [{
									name: "交流电压RUA",
									data: this.exchange.voltageRUA,
									index: 0,
									pointShape: "none",
								},
								{
									name: "交流电压SVB",
									data: this.exchange.voltageSVB,
									pointShape: "none",
									index: 0
								},
								{
									name: "交流电压TWC",
									data: this.exchange.voltageTWC,
									pointShape: "none",
									index: 0
								},
								{
									name: "交流电流RUA",
									data: this.exchange.currentRUA,
									pointShape: "none",
									index: 1
								},
								{
									name: "交流电流SVB",
									data: this.exchange.currentSVB,
									pointShape: "none",
									index: 1
								},
								{
									name: "交流电流TWC",
									data: this.exchange.currentTWC,
									pointShape: "none",
									index: 1
								},
							]
						break;
					case 2:
						this.opts.yAxis = {
								showTitle: true,
								gridType: "dash",
								dashLength: 2,
								data: [{
									position: 'left',
									title: '电流(A)'
								}]
							},
							this.chartData.series = [{
									name: "直流电流pv1",
									data: this.pv1.current,
									pointShape: "none",
								},
								{
									name: "直流电流pv2",
									data: this.pv2.current,
									pointShape: "none",
								},
								{
									name: "直流电流pv3",
									data: this.pv3.current,
									pointShape: "none",
								},
								{
									name: "直流电流pv4",
									data: this.pv4.current,
									pointShape: "none",
								},
							]
						break;
					case 3:
						this.opts.yAxis = {
								showTitle: true,
								gridType: "dash",
								dashLength: 2,
								data: [{
									position: 'left',
									title: '电压(V)'
								}]
							},
							this.chartData.series = [{
									name: "直流电压pv1",
									pointShape: "none",
									data: this.pv1.voltage
								},
								{
									name: "直流电压pv2",
									pointShape: "none",
									data: this.pv2.voltage
								},
								{
									name: "直流电压pv3",
									pointShape: "none",
									data: this.pv3.voltage
								},
								{
									name: "直流电压pv4",
									pointShape: "none",
									data: this.pv4.voltage
								},
							]
						break;
					case 4:
						break;
					default:
						break;
				}
			},

			//选择电压电流等方式
			SelectType(index) {
				if (this.selectType === index) {
					return
				}
				this.selectType = index
				if (index === 1) {
					this.getExchangeData()
				} else if (index === 2 || index === 3) {
					this.getdcData()
				} else if (index === 4) {
					this.getPowerList()
				}
			},
			//日历选中确定
			confirm(e) {
				this.year = getDate(e.fulldate).year
				switch (this.timeType) {
					case 1:
						this.startMonth = getDate(e.fulldate).month
						this.endMonth = getDate(e.fulldate).month
						this.startDay = getDate(e.fulldate).date
						this.endDay = getDate(e.fulldate).date
						break;
					case 4:
						if (!e.range.before || !e.range.after) {
							return uni.showToast({
								icon: "none",
								title: '请选择周一到周日的时间周期'
							});
						}
						this.startMonth = getDate(e.range.before).month
						this.endMonth = getDate(e.range.after).month
						this.startDay = getDate(e.range.before).date
						this.endDay = getDate(e.range.after).date
						break;
					case 2:
						this.startMonth = getDate(e.fulldate).month
						this.endMonth = getDate(e.fulldate).month
						break;
					default:
						break;
				}

				if (this.selectType === 1) {
					this.getExchangeData()
				} else if (this.selectType === 2 || this.selectType === 3) {
					this.getdcData()
				} else {
					this.getPowerList()
				}
			},
			//选择日周月年
			selectDate(index) {
				if (this.timeType === index) {
					return
				}
				this.timeType = index
				// if(index === 2 && this.startDay === this.endDay){
				// 	this.reset()
				// 	return
				// }
				if (this.selectType === 1) {
					this.getExchangeData()
				} else if (this.selectType === 2 || this.selectType === 3) {
					this.getdcData()
				}
			},

			filterDate() {
				let startTime, endTime;
				switch (this.timeType) {
					case 1:
						startTime = `${this.year}-${this.startMonth}-${this.startDay} 00:00:00`,
							endTime = `${this.year}-${this.endMonth}-${this.endDay} 00:00:00`
						break;
					case 4:
						startTime = `${this.year}-${this.startMonth}-${this.startDay} 00:00:00`,
							endTime = `${this.year}-${this.endMonth}-${this.endDay} 00:00:00`
						break;
					case 2:
						startTime = `${this.year}-${this.startMonth}-01 00:00:00`,
							endTime = `${this.year}-${this.endMonth}-31 00:00:00`
						break;
					case 3:
						startTime = `${this.year}-1-01 00:00:00`,
							endTime = `${this.year}-12-31 00:00:00`
						break;
					default:
						break;
				}
				return {
					startTime,
					endTime
				}
			},

			//请求直流数据
			async getdcData() {
				this.reset()
				const token = uni.getStorageSync('Token')
				let {
					startTime,
					endTime
				} = this.filterDate()
				let timeType = 1
				//以防后期加上周
				if (this.timeType === 2 || this.timeType === 3) {
					timeType = this.timeType + 1
				}
				let res = await getDeviceQuerydcHistory({
					id: this.did,
					timeType,
					startTime,
					endTime,
					token
				})
				let data = Object.entries(res.data).sort()
				if (!data.length) {
					return
				}
				for (let [key, value] of data) {
					if (this.timeType === 1) {
						//let date = key.split(" ")[1].slice(0, -3)
						this.chartData.categories.push(key)
					} else {
						let date = key.split(" ")[0]
						this.chartData.categories.push(date)
					}
					value.forEach(i => {
						switch (i.title) {
							case "PV1":
								this.pv1.voltage.push(i.voltage)
								this.pv1.current.push(i.current)
								break;
							case "PV2":
								this.pv2.voltage.push(i.voltage)
								this.pv2.current.push(i.current)
								break;
							case "PV3":
								this.pv3.voltage.push(i.voltage)
								this.pv3.current.push(i.current)
								break;
							case "PV4":
								this.pv4.voltage.push(i.voltage)
								this.pv4.current.push(i.current)
								break;
							default:
								break;
						}
					})
					this.isSelectType(this.selectType)
				}
			},

			//请求交流分析数据
			async getExchangeData() {
				this.reset()
				const token = uni.getStorageSync('Token')
				let {
					startTime,
					endTime
				} = this.filterDate()
				let timeType = 1
				//以防后期加上周
				if (this.timeType === 2 || this.timeType === 3) {
					timeType = this.timeType + 1
				}
				let res = await getDeviceQueryHistory({
					id: this.did,
					timeType,
					startTime,
					endTime,
					token
				})
				let data = Object.entries(res.data).sort()
				if (!data.length) {
					return
				}
				if (this.timeType === 1) {
					for (let [key, value] of data) {
						if (key === "allActivePower") {
							continue
						}
						//let date = key.split(" ")[1].slice(0, -3)
						this.chartData.categories.push(key)
						value.forEach(i => {
							switch (i.title) {
								case "交流1":
									this.exchange.currentRUA.push(i.current)
									this.exchange.voltageRUA.push(i.voltage)
									break;
								case "S":
									this.exchange.currentSVB.push(i.current)
									this.exchange.voltageSVB.push(i.voltage)
									break;
								case "T":
									this.exchange.currentTWC.push(i.current)
									this.exchange.voltageTWC.push(i.voltage)
									break;
								default:
									break;
							}
						})
						this.isSelectType(this.selectType)
					}
				} else if (this.timeType === 2 || this.timeType === 3) {
					let series = []
					for (let [key, value] of data) {
						if (key === "allActivePower") {
							continue
						}
						series.push(value)
						this.chartData.categories.push(key)
					}
					this.chartData.series = [{
						name: "发电量V",
						data: series,
					}]
				}
			},

			//功率请求
			async getPowerList() {
				this.reset()
				const createTime = `${this.year}-${this.startMonth}-${this.startDay} 00:00:00`
				const token = uni.getStorageSync('Token')
				let res = await getDeviceQuerydcPowerList({
					id: this.did,
					token,
					createTime
				})
				this.powerList = res.data
			}
		}
	}
</script>

<style scoped lang='scss'>
	.history {
		.select {
			background-color: #fff;
			padding: 10rpx;

			.select_date {
				padding: 10rpx;
				display: flex;
				justify-content: space-around;

				.select_date_item {
					border-radius: 10rpx;
					border: 2rpx solid #ccc;
					padding: 10rpx 40rpx;
				}

				.active {
					background-color: #3e6ff0;
					color: #fff;
				}

				.noActive {
					background-color: #fff;
					color: #333;
				}
			}

			.date_mouth {
				border-top: 2rpx dashed #ccc;
				display: flex;
				padding: 30rpx;

				.date_mouth_left {
					width: 33%;
				}

				.date_mouth_center {
					text {
						color: #808080;
						font-size: 28rpx;
						padding: 0 4rpx;
					}
				}
			}
		}

		.charts {
			margin-top: 20rpx;

			.power_list {
				font-size: 24rpx;
				text-align: center;

				.title {
					font-weight: bold;
					display: flex;
					border-bottom: 2rpx solid #ccc;

					view {
						width: 33%;
					}
				}

				.list {
					border-bottom: 2rpx solid #ccc;
					display: flex;
					padding: 10rpx 0;

					view {
						width: 33%;
					}
				}
			}

			.select_type {
				border-bottom: 2rpx solid #ccc;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;

				view {
					border-radius: 10rpx;
					padding: 4rpx;
				}

				.active {
					border: 2rpx dashed #3e6ff0;
					background-color: #dfeef9;
					color: #3e6ff0;
				}

				.noActive {
					background-color: #fff;
					border: 2rpx dashed #ccc;
					color: #333;
				}
			}

			.title {
				padding-top: 20rpx;
				text-align: center;
			}
		}

	}
</style>